<template>
  <div id="resume">
    <a href="https://www.weison-zhong.cn/web/api/download" target="_blank"
      ><div v-show="show">
        <h2 ref="title1Ref">{{ title1 }}</h2>
      </div>
      <div v-show="!show">
        <h2 ref="title2Ref">{{ title2 }}</h2>
      </div></a
    >
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, ref, onMounted } from "vue";
import http from "../../services/http";
export default {
  setup() {
    const title1Ref = ref(null);
    const title2Ref = ref(null);
    const state = reactive({
      title1: "",
      title2: "",
      show: true,
    });
    onBeforeMount(async () => {
      const { data: res } = await http.get("resume");
      state.title1 = res.title1;
      if (res.title2) {
        state.title2 = res.title2;
      }
    });
    const setDelay = (el) => {
      el.innerHTML = el.textContent.replace(/\S/g, "<span>$&</span>");
      let delay = 0;
      el.querySelectorAll("span").forEach((span, index) => {
        delay += 0.1;
        span.style.setProperty("--delay", `${delay}s`);
      });
    };
    onMounted(() => {
      setInterval(() => {
        setDelay(title1Ref.value);
        state.title2 && setDelay(title2Ref.value);
        state.show = !state.show;
      }, 3500);
    });
    return {
      ...toRefs(state),
      title1Ref,
      title2Ref,
    };
  },
};
</script>


<style lang="scss">
#resume {
  margin: 2rem auto;
  padding: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  a {
    color: rgb(50, 50, 50);
  }
  div {
    h2 {
      position: relative;
      height: 2rem;
      line-height: 2rem;
      letter-spacing: 3px;
      span {
        --delay: 10s;
        display: inline-block;
        overflow: hidden;
        width: 0ch;
        animation: 0.4s text-in ease-in-out forwards;
        animation-delay: var(--delay);
      }
      @keyframes text-in {
        from {
          width: 0ch;
        }
        to {
          width: 2ch;
        }
      }
    }
  }
}
</style>